<template>
  <el-dialog
    v-model="dialogVisible"
    :title="state.title"
    width="1000px"
    @close="closeDialog"
  >
    <el-form
      ref="formRef"
      label-position="left"
      label-width="120px"
      :model="state.form"
      require-asterisk-position="right"
    >
      <el-form-item label="图纸编码" prop="gytzCode" :required="true">
        <el-input v-model="state.form.gytzCode" />
      </el-form-item>
      <el-form-item label="图纸名称">
        <el-input v-model="state.form.gytzName" />
      </el-form-item>
      <el-form-item label="备注">
        <el-input v-model="state.form.remark" />
      </el-form-item>
      <el-form-item label="文件上传">
        <el-upload
          action="#"
          :before-upload="beforeUpload"
          class="upload-demo"
          :file-list="state.upload.fileList"
          :http-request="(options) => uploadFile(options)"
          :limit="state.upload.fileLimit"
          :list-type="state.upload.fileType"
          :on-exceed="onExceed"
          :on-preview="handlePreview"
          :on-remove="handleRemove"
        >
          <el-button type="primary">上传文件</el-button>
        </el-upload>
      </el-form-item>
    </el-form>

    <template #footer>
      <span class="dialog-footer">
        <el-button @click="dialogVisible = false">取消</el-button>
        <el-button type="primary" @click="save">保存</el-button>
      </span>
    </template>
  </el-dialog>
</template>
<script setup>
  import { editGytzApi, uploadFileApi } from '@/api/mes/gytz_api'
  // import { localStorageConfig } from '@/config/localstorage.config'
  // const pkCorp = localStorage.getItem(localStorageConfig.__pkCorp)
  const $baseMessage = inject('$baseMessage')
  const dialogVisible = ref(false)
  const formRef = ref()
  const state = reactive({
    title: '新增工艺图纸',
    form: {
      pkEquipBom: '',
      gytzCode: '',
      gytzName: '',
      remark: '',
    },
    upload: {
      //上传后的文件列表
      fileList: [],
      // 允许的文件类型
      fileType: 'text',
      // 运行上传文件大小，单位 M
      fileSize: 160,
      // 附件数量限制
      fileLimit: 1,
    },
  })

  //上传文件之前
  const beforeUpload = (file) => {
    if (file.type != '' || file.type != null || file.type != undefined) {
      //截取文件的后缀，判断文件类型
      // const FileExt = file.name.replace(/.+\./, '').toLowerCase()
      //计算文件的大小
      const isLt5M = file.size / 1024 / 1024 < 50 //这里做文件大小限制
      //如果大于50M
      if (!isLt5M) {
        $baseMessage('上传文件大小不能超过 160MB!')
        return false
      }
    }
  }
  const onExceed = () => {
    $baseMessage('上传文件个数不能超过：' + state.upload.fileLimit, 'error')
  }
  const handlePreview = () => {}
  const handleRemove = () => {}

  //上传文件的事件
  const uploadFile = async (item) => {
    const formData = new FormData()
    formData.append('file', item.file)
    const res = await uploadFileApi(formData)
    if (res && String(res.code) === '2000') {
      $baseMessage(res && res.msg ? res.msg : '操作成功', 'success')
      state.form.fileUrl = res.data.fileUrl
      state.form.fileName = res.data.fileName
    } else {
      $baseMessage(res && res.msg ? res.msg : '操作失败,请重试', 'error')
    }
  }

  const closeDialog = () => {
    dialogVisible.value = false
  }
  const save = () => {
    formRef.value.validate(async (valid) => {
      if (valid) {
        const { msg } = await editGytzApi(state.form)
        $baseMessage(msg, 'success')
        _emits('save-success')
        closeDialog()
      }
    })
  }
  defineExpose({
    handleOpen: (item) => {
      dialogVisible.value = true
      state.upload.fileList = []
      state.form.pkMesGytz = item.pkMesGytz
      state.form.gytzCode = item.gytzCode
      state.form.gytzName = item.gytzName
      state.form.remark = item.remark
      state.form.fileUrl = item.fileUrl
      state.form.fileName = item.fileName
      if (state.form.fileUrl) {
        state.upload.fileList.push({
          name: state.form.fileName,
          url: state.form.fileUrl,
        })
      }
    },
  })
  const _emits = defineEmits(['save-success'])
</script>
<style lang="scss" scoped></style>
